<template>
  <div class="rw-table">
    <el-table :data="tableData" style="width: 100%" v-bind="$attrs">
      <template v-for="(item,index) in columns">
        <el-table-column :prop="item.key" :label="item.label" :key="index" v-if="item.slot" :width="item.width" :align="item.align ? item.align : 'left'">
            <template slot-scope="scope">
                <slot :name="item.key" :row="!responsive?JSON.parse(JSON.stringify(scope.row)):scope.row" :index="scope.$index"></slot>
            </template>
        </el-table-column>
        <el-table-column :prop="item.key" :label="item.label" :key="index" :width="item.width" :align="item.align ? item.align : 'left'" :show-overflow-tooltip="item.showOverflowTooltip" v-else></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
    props: {
      columns: {
        type: Array,
        default: () => {
          return []
        },
        required: true
      },
      tableData: {
        type: Array,
        default: () => {
          return []
        },
        required: true
      },
      responsive:{
        type: Boolean,
        default: () => {
          return false
        },
      }
    }
})
export default class Table extends Vue {
  
}
</script>

<style lang="scss">
.el-table th{
  background: #eef1f6 !important;
  color:#606266 !important;
}
.el-table{
  .el-table__cell{
    .cell{
      .el-button + .el-button{
        margin-left: 0;
      }
      .el-button{
        margin-right: 10px;
      }
    }
  }
}
</style>